<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <link rel="stylesheet" href="/css/info.css" />

    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>退货单</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 退货地址 -->
            <div class="aui-flex">
                <div style="font-size: 16px">退货地址：</div>
                <div class="aui-flex-box">
                    <h3>
                        张三 <em>13060808099</em>
                    </h3>
                    <p>广东省广州市海珠区财智大厦</p>
                </div>
            </div>
        </section>
    </section>

    <van-divider :dashed="true" :style="{ borderColor: '#1989fa' }" />

    <!-- 商品卡片 -->
    <van-card v-for="(item, key) in product" :key="key" :price="item.total" :thumb="item.products.thumbs_text"
        :num="item.pronum" @click-thumb="toProductInfo(item.proid)">
        <template #title>
            <div class="title">{{ item.products.name }}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
            <van-tag v-for="(value, index) in item.attrs" :key="index" type="primary">{{
                value.value }}</van-tag>
        </template>

        <template #desc v-else>
            <van-tag type="danger">无规格商品</van-tag>
        </template>
    </van-card>

    <!-- 寄件信息 -->
    <van-form @submit="submit">
        <van-field label="物流公司" placeholder="点击选择物流公司" v-model="back.express_name" readonly is-link
            @click="ExpressShow = true" />

        <!-- 弹框组件 -->
        <van-popup v-model:show="ExpressShow" position="bottom">
            <van-picker title="选择物流" :columns="ExpressList" :columns-field-names="{ text: 'name', value: 'id' }"
                @confirm="ExpressConfirm" @cancel="ExpressShow = false" />
        </van-popup>

        <van-field label="寄件地址" placeholder="点击选择寄件地址" v-model="back.addr_name" readonly is-link
            @click="AddressShow = true" />

        <!-- 弹框组件 -->
        <van-popup v-model:show="AddressShow" position="bottom">
            <van-picker title="选择寄件地址" :columns="AddressList" :columns-field-names="{ text: 'name', value: 'id' }"
                @confirm="AddressConfirm" @cancel="AddressShow = false" />
        </van-popup>

        <van-field v-model="back.expresscode" name="expresscode" label="物流单号" placeholder="请输入物流单号"
            :rules="[{ required: true, message: '请输入物流单号' }]" />

        <van-field v-model="back.remark" name="remark" rows="2" autosize label="退货备注" type="textarea" maxlength="120"
            placeholder="请输入退货备注" show-word-limit :rules="[{ required: true, message: '请输入退货备注' }]" />

        <!-- 头像上传 -->
        <van-field name="thumbs" label="上传图集">
            <!-- 插槽重新输入框部分，用文件上传来代替 -->
            <template #input>
                <van-uploader multiple v-model="thumbs" :max-count="6" />
            </template>
        </van-field>

        <div class="actions">
            <van-button :loading="loading" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
                native-type="submit">提交</van-button>
        </div>
    </van-form>
</template>

<script setup>
import { getCurrentInstance, ref, onBeforeMount } from 'vue'

const { proxy } = getCurrentInstance()

let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
let loading = ref(false)
let product = ref([])
let address = ref(null)
let order = ref({})
let back = ref({
    expressid: 0,
    express_name: '',
    addrid: 0,
    addr_name: '',
    remark: '',
})

let thumbs = ref([])

// 物流快递公司
let ExpressShow = ref(false)
let ExpressList = ref([])

//寄件地址
let AddressShow = ref(false)
let AddressList = ref([])

onBeforeMount(() => {
    OrderData()
    ExpressData()
    AddressData()
})

const OrderData = async () => {
    var params = {
        orderid: orderid,
        busid: proxy.$business.value.id
    }

    var result = await proxy.$POST({
        url: '/order/info',
        params
    })

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    address.value = result.data.address
    order.value = result.data.order

    if (result.data.product) {
        result.data.product.map(item => item.attrs = JSON.parse(item.attrs))
    }

    product.value = result.data.product

}

const ExpressData = async () => {
    var result = await proxy.$POST({ url: '/express/index' })

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    ExpressList.value = result.data
}

const AddressData = async () => {
    var result = await proxy.$POST({
        url: '/address/index',
        params: {
            busid: proxy.$business.value.id
        }
    })

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    var list = []

    result.data.map((item) => {
        list.push({
            id: item.id,
            name: `${item.region_text} ${item.address} (${item.mobile})`
        })
    })

    AddressList.value = list
}


// 物流确认方法
const ExpressConfirm = async ({ selectedOptions }) => {
    ExpressShow.value = false

    back.value.expressid = selectedOptions[0].id
    back.value.express_name = selectedOptions[0].name
}

// 寄件地址确认方法
const AddressConfirm = async ({ selectedOptions }) => {
    AddressShow.value = false

    back.value.addrid = selectedOptions[0].id
    back.value.addr_name = selectedOptions[0].name
}

//跳转到商品详情界面
const toProductInfo = pid => proxy.$router.push({ path: '/product/info', query: { pid } })

//表单提交
const submit = async (values) => {
    // loading.value = true

    if (!back.value.expressid) {
        proxy.$fail('请选择物流公司')
        return false
    }

    if (!back.value.addrid) {
        proxy.$fail('请选择寄件地址')
        return false
    }

    var params = {
        busid: proxy.$business.value.id,
        orderid: orderid,
        expressid: back.value.expressid,
        expresscode: back.value.expresscode,
        addrid: back.value.addrid,
        remark: back.value.remark,
        thumbs: [],
    }

    if (values.thumbs.length > 0) {
        values.thumbs.map((item) => {
            params.thumbs.push(item.file)
        })
    }

    //接口调用
    if (params.thumbs.length > 0) //有图片
    {
        var result = await proxy.$UPLOAD({
            url: '/back/add',
            params
        })
    } else  //没有图片
    {
        // eslint-disable-next-line no-redeclare
        var result = await proxy.$POST({
            url: '/back/add',
            params
        })
    }

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    } else {
        proxy.$success({
            message: result.msg,
            onClose: () => proxy.$router.go(-1)
        })
        return false
    }
}

</script>

<style scoped>
:deep(.cart) {
    display: flex;
    width: 100%;
}

::v-deep .van-swipe-cell {
    width: 100%;
}

.van-card {
    background-color: transparent;
}

.delete-button {
    height: 100%;
}

.van-tag {
    margin-right: 5px;
}

.title {
    font-size: 16px;
    font-weight: bold;
}

.actions {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
</style>